<template>
	<view class="people">
		
	   <view class="">
	   <u-notice-bar bgColor="#ecf5ff" color="#3c9cff" :text="text1"></u-notice-bar>
	   </view>
	   <u-navbar
	             title="家庭成员"
	             :autoBack="true"
	         >
	         </u-navbar>
			 <u-popup v-model="showw" mode="top" width="100%" height="100%" border-radius="10">
			 	<view class="pop">
			 		<view class="poptop">
			 			<u-navbar :custom-back="cancell" :is-back="true" :title-bold="true" title="健康卡授权"></u-navbar>
			 		</view>
			 		<view class="cardimg">
			 			<image src="../../../static/icons/cardicon.png" mode=""></image>
			 		</view>
			 		<view class="hosname">
			 			河南预约挂号平台
			 		</view>
			 		<view class="" v-if="showpp">
			 			<health-card-login encrypt="true" authLogin="false" @authFail="authFail" @authSucess="authSuccess" :authCancel="authCancel"
			 			 wechatcode="true">
			 				<view class="foott">
			 					<view @click="hideComponentLogin()" class="agree">一键登录授权</view>
			 				</view>
			 				<view class="shuoming">
			 					登录代表同意<span @click="goxieyi()">《用户服务协议与隐私政策》</span>并授权使用您的账号信息以便您统一管理
			 				</view>
			 			</health-card-login>
			 		</view>
			 	</view>
			 </u-popup>
		<view class="cards">
			<view class="card"  >
				<view class="sexlogo"  v-if="userinfo.sex=='0'">
					<image src="../../../static/icons/women.png" mode="aspectFit"></image>
				</view>
				<view class="sexlogo"  v-if="userinfo.sex=='1'">
					<image src="../../../static/icons/men.png" mode="aspectFit"></image>
				</view>
				<view class="moren">
					默认
				</view>
				<view class="cardleft" >
					<view class="username">
					 {{userinfo.name?userinfo.name:""}}
					</view>
					<view class="usercardid">
						联系方式：{{userinfo.mobile?userinfo.mobile:""}}
					</view>
					<view class="usercardid">
						证件号：{{userinfo.cardno?userinfo.cardno:""}}
					</view>
				</view>
				<!-- <view class="cardright">
					<u-icon name="trash" size="28"></u-icon>
				</view> -->
		
			</view>
			<view class="card" v-for="item in childuserinfo" >
				<view class="sexlogo" v-if="item.sex=='1'" >
					<image src="../../../static/icons/men.png" mode="aspectFit"></image>
				</view>
				<view class="sexlogo" v-if="item.sex=='0'" >
					<image src="../../../static/icons/women.png" mode="aspectFit"></image>
				</view>
				<view class="cardleft" >
					<view class="username">
						{{item.name}}
					</view>
					<view class="usercardid">
						联系方式：{{item.mobile}}
					</view>
					<view class="usercardid">
						证件号：{{item.cardno}}
					</view>
				</view>
				<view class="cardright" @click="delpep(item)">
					<u-icon name="trash" size="28"></u-icon>
				</view>
					
			</view>
		</view>
	
		<view class="foot" @click="goaddpep()" v-if="childuserinfo.length<9">
			添加就诊人
		</view>
			<u-modal :show="show" title="温馨提示" @close="close()" :closeOnClickOverlay="true" content='您确定要删除该就诊人吗？' @cancel="cancel()" :showCancelButton="true" @confirm="delpepcon()"></u-modal>
	
	</view>
</template>

<script>
	import homeApi from '@/api/home'
	import urlApi from "@/setting.js"
	import homeApii from '@/api/homee'
	import { reportCmPV } from '../../../api/cloudMonitorHelper.js';
	export default {
		data() {
			return {
				showpp: false,
				showw:false,
				  text1: '',
				  userinfo:"",
				  token:"",
				  childuserinfo:"",
				  show:false,
				  childid:"",
				  num:"9",
				  wechatCode:""
			
			}
		},
	
		onLoad(option) {
			reportCmPV({ title: '查询家庭成员', option });
			// my.hideShareMenu({
			//   success(res) {
			//     console.log('success', res) // {success: true}
			//   },
			//   fail(err) {
			//     console.log('fail', err)
			//   }
			// })
let token=uni.getStorageSync("token")
			if(token){
				this.token=token
				this.getuserinfo()
			}else{
				this.gettoken()
			}
		},

		methods: {
			hideComponentLogin() {
				this.showw = false
				uni.showLoading()
			},
			login() {
				const plugin = requirePlugin('myPlugin')
				// plugin.login(callback, options)
				plugin.login((isok, res) => {
					console.log('plugin.login: ', isok, res)
					if (res.result.type !== 3) {
						// 用户在微信授权过，可直接获取登录信息，处理后续业务
						this.todo(res)
					} else {
						// 用户未授权，需要用户同意授权
						// 显示 healthCardLogin 登录组件，引导用户同意授权
						this.showw = true
						this.showpp = true
					}
				}, {
					wechatcode: true
				})
			},
			authSuccess(data) {
				uni.hideLoading()
				let res = data.detail
				// 同 plugin.login，用户同意授权，获取登录信息，处理后续业务
				this.todo(res)
			},
			
			// 用户取消授权，授权失败回调
			authCancel() {
				uni.hideLoading()
			
			},
			
			// 业务代码（成功获取登录数据）
			todo(res) {
				// 传入参数 wechatcode = true 结果输出 wechatCode ，注意大小写
				// 传入参数 healthcode = true 及健康卡卡号 ecard_no，输出healthCode
				this.wechatCode = res.result.wechatCode
				if (this.wechatCode) {
					uni.navigateTo({
						url: `../addcard/addcard?wechatCode=${this.wechatCode}`
					})
				} else {
					this.login()
				}
			
			},
			cancell() {
				this.showw = false
				this.showpp = false
			},
			close(){
				this.show=false
			},
			cancel(){
				this.show=false
			},
			delpep(item){
				this.childid=item.userid
				this.show=true
			},
			delpepcon(){
				uni.showLoading({title: '加载中',mask:true});
				homeApii.delcard({
					token:this.token,
					pid:this.childid
				}).then(res=>{
					uni.hideLoading()
					if(res.code==4000){
						this.show=false
						uni.showToast({
							title:"删除成功",
							icon:"none"
						})
						this.getuserinfo()
					}
				})
			},
			getuserinfo(){
				uni.showLoading({title: '加载中',mask:true});
				homeApii.getuserinfo({
					token:this.token
				}).then(res=>{
					console.log(res)
					uni.hideLoading()
					if(res.code==4000){
						this.userinfo=res.data.userinfo
						this.childuserinfo=res.data.childuserinfo
						if(this.childuserinfo){
							this.num=9-this.childuserinfo.length
							console.log(this.num,"123")
							this.text1="每个账号可以添加10位就诊人，您还可以添加"+this.num+"位"
							this.$forceUpdate();
						}else{
							
							this.text1="每个账号可以添加10位就诊人，您还可以添加"+"9位"
							this.$forceUpdate();
						}
						
					}
					
				})
			},
			gettoken() {
				// my.getAuthCode({
				// 	scopes: 'auth_base',
				// 	success: res => {
				// 		const authCode = res.authCode;
				// 		homeApii.getopenid({
				// 			code:authCode
				// 		}).then(res=>{
				// 			console.log(res)
				// 			uni.setStorageSync("token",res.data.token)
				// 			this.token=res.data.token
				// 			this.getuserinfo()
				// 		})
				// 	},
				// 	fail: err => {
				// 		console.log('my.getAuthCode 调用失败', err)
				// 		uni.showToast({
				// 			title:"取消授权，您将无法享用完整服务。"
				// 		})
				// 	}
				// });
			},
			goaddpep(){
				if (this.wechatCode) {
					uni.navigateTo({
						url: `../addcard/addcard?wechatCode=${this.wechatCode}`
					})
				} else {
					this.login()
				}
				// uni.navigateTo({
				// 	url:"/pages/mine/addcard/addcard?userid="+this.userinfo.userid
				// })
			}



		}
	}
</script>
<style>
	.u-modal__content{
		text-align: center;
	}
</style>
<style scoped lang="scss">
	.people {
	background-color: #F5F6F8;
	// padding-bottom: 100rpx;
	height: 100vh;
	overflow: hidden;
	padding-top: 180rpx;
	.pop {
		width: 100%;
		overflow: hidden;
	
		.poptop {
			width: 100%;
		}
	
		.cardimg {
			width: 150rpx;
			height: 150rpx;
			margin: 0 auto;
			margin-top: 120rpx;
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.hosname {
			width: 95%;
			margin: 0 auto;
			text-align: center;
			font-size: 50rpx;
			font-weight: bold;
			margin-top: 80rpx;
		}
	
	
	
		.title {
			width: 100%;
			text-align: center;
			margin-top: 18rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 550;
		}
	
		.info {
			width: 80%;
			margin: 0 auto;
			margin-top: 10rpx;
			font-size: 28rpx;
		}
	
		.shuoming {
			width: 95%;
			margin: 0 auto;
			font-size: 28rpx;
			color: #999;
			line-height: 40rpx;
			margin-top: 80rpx;
	
			span {
				color: orange;
			}
	
		}
	
		.foott {
			width: 80%;
			margin: 0 auto;
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;
	
	
	
			.agree {
				width: 80%;
				height: 90rpx;
				margin: 0 auto;
				font-size: 34rpx;
				color: #fff;
				border-radius: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #3669F8;
				margin-top: 100rpx;
			}
		}
	}
	
	
.popma{
	width: 600rpx;
	height: 600rpx;
	font-weight: bold;
	text-align: center;
	padding-top: 50rpx;
	font-size: 30rpx;
	line-height: 50rpx;
	image{
		width: 400rpx;
		height: 400rpx;
	}
}
		.cards {
			padding-bottom: 30rpx;
			margin-top: 30rpx;
		}

		.card {
			width: 90%;
			margin: 20rpx auto;
			display: flex;
			padding-bottom: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 15rpx;
			padding-top: 25rpx;
			padding-bottom: 25rpx;
			position: relative;
           .moren{
			   width: 80rpx;
			   height: 40rpx;
			   background-color: #57B663;
			   color: #fff;
			   text-decoration: center;
			   font-size: 20rpx;
			   line-height: 40rpx;
			   position: absolute;
			   text-align: center;
			   right: 0;
			   top: 0;
			   border-radius: 0 15rpx 0 15rpx;
		   }
			.sexlogo {
				width: 100rpx;
				height: 100rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.cardleft {
				margin-left: 30rpx;
				.username {
					font-size: 36rpx;
					font-weight: 600;
					color: #000;
					padding-bottom: 10rpx;
				}

				.usercardid {
					font-size: 28rpx;
					font-weight: 500;
					color: #999;
					line-height: 40rpx;
				}

			}

			.cardright {
				margin-top: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: red;
				line-height: 40rpx;
                 margin-left: 70rpx;
				image {
					width: 45rpx;
					height: 45rpx;
				}

			}
		}

		.foot {
		width: 93%;
		margin: 0 auto;
		margin-top: 80rpx;
		border-radius: 15rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-color: #4581f7;
		color: #fff;
		text-align: center;
		}

	}
</style>
